<template>
  <div>
    <nav-bar/>
    <div class="register-nav-bar">
      <h3>立即享受会员</h3>
      <h5>成为子昂酒店会员，尽享专属权益及畅快的数字化体验。</h5>
    </div>
    <div class="register-form">
      <el-form ref="registerForm" status-icon :rules="registerFormRule" label-position="top"
               :model="user" label-width="100px" size="medium" >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="user.username" @re></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="user.name"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="user.email"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="user.phone"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="user.address"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="user.password" show-password></el-input>
        </el-form-item>
        <el-form-item label="再次输入密码" prop="checkPassword">
          <el-input type="password" v-model="user.checkPassword" show-password></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio v-model="user.gender" :label="false" border>男</el-radio>
          <el-radio v-model="user.gender" :label="true" border>女</el-radio>
        </el-form-item>
      </el-form>

      <el-button type="primary" style="width: 100%" @click="register">确 定</el-button>
    </div>
    <Footer/>
  </div>
</template>

<script>
import NavBar from "@/components/common/navbar/NavBar";
import Footer from "@/components/common/footer/Footer";
import {checkUsername, registerUser} from "@/network/common";
export default {
  name: "Register",
  components: {Footer, NavBar},
  data(){
    const validateUsername = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入用户名'));
      } else {
        if (value.length < 3 || value.length >15){
          callback(new Error('密码长度为3-15个字符'));
        }else{
          checkUsername(value).then(res=>{
            callback();
          })
        }
      }
    }
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (value.length < 5 || value.length >15){
          callback(new Error('密码长度为5-15个字符'));
        }
        if (this.user.checkPassword !== '') {
          this.$refs.registerForm.validateField('checkPassword');
        }
        callback();
      }
    };
    const validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      }else if (value !== this.user.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return{
      user:{
        gender:false
      },
      registerFormRule:{
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 3, max: 15, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { validator: validateUsername, trigger: 'blur' }
        ],
        email: [
          { type: 'email', message: '请输入正确的邮箱', trigger: 'blur' },
          { min: 5, max: 20, message: '长度在 5 到 20 个字符', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入正确的电话', trigger: 'blur' },
          { min: 7, max: 11, message: '长度在 7 到 11 个字符', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请输入地址', trigger: 'blur' },
          { min: 4, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' }
        ],
        password: [
          { validator: validatePass, trigger: 'blur' }
        ],
        checkPassword: [
          { validator: validatePass2, trigger: 'blur' }
        ],
      },
    }
  },
  methods:{
    register(){
      this.$refs.registerForm.validate(valid=>{
        if (valid){
          registerUser(this.user).then(res=>{
            this.$message.success('注册成功')
            this.user = {gender:false}
          })
        }else {
          console.log('表单验证失败')
        }
      })
    }
  },created() {
    this.user = {gender:false}
  }
}
</script>

<style scoped>
  .register-nav-bar {
    margin-bottom: 10px;
    height: 102px;
    text-align: center;
    background-color: #fff;
    font-weight: 400;
    color: #333;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,.08);
  }
  .register-nav-bar h3 {
    font-size: 28px;
    line-height: 28px;
  }
  .register-nav-bar h5 {
    font-size: 14px;
    line-height: 20px;
  }
  .register-form {
    margin: 0 auto;
    width: 600px;
  }
  .footer {
    margin: 40px auto;
    text-align: center;
    font-size: 30px;
  }
</style>